<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img{
            width: 200px;
            height: 200px;
            border: 1px solid #dedede;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
    <script src="./directive/v-preload.js"></script>
</head>
<body>
    <!-- <div id="app">
        <img class="img" :src=" imgPath " alt="" srcset="">
    </div> -->

    <div id="app">
        <img class="img" v-preload=" 'http://pic1.win4000.com/wallpaper/2020-02-28/5e589c9103ac8.jpg' " style="text-align: center;">
    </div>

    <script>
        // img 标签以DOM对象方法是在JS中定义，依然可以完成图片请求加载
        // let img = document.createElement("img")
        // img.src = "http://pic1.win4000.com/wallpaper/2020-02-28/5e589c9103ac8.jpg"
        // // onload => 是所有的DOM元素都存在的加载完成监听方法，该方法对于调用对象的不同，描述的含义也将发生变化
        // img.onload = function(){
        //     console.log("图片加载完成")
        // }

        // new Vue({
        //     el:"#app",
        //     data:{
        //         imgPath:"../assets/img/R-C.gif"
        //     },
        //     created() {
        //         let img = document.createElement("img")
        //         img.src = "http://pic1.win4000.com/wallpaper/2020-02-28/5e589c9103ac8.jpg"
        //         img.onload = ()=>{
        //             this.imgPath = "http://pic1.win4000.com/wallpaper/2020-02-28/5e589c9103ac8.jpg"
        //         }
        //     },
        // })

        
        // Vue.directive("preload", function(el,binding){
        //     // console.log("asdasd")

        //     el.src = "../assets/img/R-C.gif";

        //     let img = document.createElement("img");
        //     img.src = binding.value;
            
        //     img.onload = function(){
        //         el.src = binding.value
        //     }
        // })

        new Vue({
            el:"#app",
            data:{

            },
        })
    </script>
</body>
</html>
